<template>
  <view class="live-page">
    <!-- 直播状态提示 -->
    <view v-if="!isLiveAvailable" class="live-status-tip">
      直播已结束或还未开始
    </view>

    <!-- 直播顶部区域 -->
    <view class="live-top">
      <view class="live-top-left">
        <image :src="hostAvatar" mode="aspectFill" class="host-avatar"></image>
        <view class="host-name">{{ hostName }}</view>
      </view>
      <view class="live-top-right">
        <view class="viewer-count">{{ viewerCount }}人正在观看</view>
        <button class="shop-btn" @click="toggleProductList">橱窗</button>
      </view>
    </view>

    <!-- 直播内容播放区域 -->
    <video 
      :src="liveUrl" 
      autoplay 
      controls 
      class="live-video" 
      @error="handleVideoError"
    ></video>

    <!-- 弹幕互动区域 -->
    <view class="danmu-area">
      <view 
        ref="danmuListRef"
        v-for="(danmu, index) in danmus" 
        :key="index" 
        class="danmu-item"
      >
        {{ danmu }}
      </view>
      <input 
        v-model="newDanmu" 
        placeholder="发送弹幕" 
        class="danmu-input" 
        @keyup.enter="sendDanmu"
      />
    </view>

    <!-- 商品卡片（每10秒展示） -->
    <view 
      v-if="showGoodsCard" 
      class="goods-min-card" 
      @click="toBuy"
    >
      <image :src="currentGoods.image" mode="aspectFill" class="goods-image"></image>
      <view class="goods-title">{{ currentGoods.name }}</view>
      <button class="buy-btn">点击购买</button>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';

// 直播基础数据
const hostName = ref('卷心菜');
const hostAvatar = ref('/static/icon/grid-card/shucai.png');
const viewerCount = ref(1024);

// 直播视频控制
const liveUrl = ref(
  'http://sulosqt4w.hn-bkt.clouddn.com/test1.mp4?e=1744520286&token=NHN3_UaHGLYla1QruFKB9uBtI7K0uJ4ZB7wrH4iP:mcSSFzhwdRFzX440o-Mv49kBej8='
);
const isLiveAvailable = ref(true); // 直播有效性状态

// 弹幕管理
const danmus = ref(['主播太厉害了！', '这个商品好棒啊！']);
const newDanmu = ref('');
const danmuListRef = ref(null);

// 商品卡片定时展示
const goodsList = ref([
  { id: 1, name: '有机卷心菜', image: '/static/image/goods/1.jpeg' },
  { id: 2, name: '新鲜胡萝卜', image: '/static/image/goods/2.jpeg' }
]);
const currentGoods = ref(goodsList.value[0]);
const showGoodsCard = ref(false);
let goodsInterval = null;

// 橱窗管理
const showProductList = ref(false);

// 视频错误处理
const handleVideoError = () => {
  isLiveAvailable.value = false;
  clearInterval(goodsInterval); // 停止商品展示
};

// 定时切换商品卡片（每10秒）
onMounted(() => {
  goodsInterval = setInterval(() => {
    currentGoods.value = 
      goodsList.value[(goodsList.value.indexOf(currentGoods.value) + 1) % goodsList.value.length];
    showGoodsCard.value = !showGoodsCard.value; // 切换显示状态
  }, 10000);
});

onUnmounted(() => {
  clearInterval(goodsInterval);
});

// 发送弹幕
const sendDanmu = () => {
  if (newDanmu.value.trim() && isLiveAvailable.value) {
    danmus.value.push(newDanmu.value);
    newDanmu.value = '';
    // 滚动到最新弹幕
    if (danmuListRef.value) {
      danmuListRef.value.scrollTop = danmuListRef.value.scrollHeight;
    }
  }
};

// 橱窗开关
const toggleProductList = () => {
  showProductList.value = !showProductList.value;
};

// 购买跳转
const toBuy = () => {
  console.log(`购买商品: ${currentGoods.value.name}`);
  // 实际跳转逻辑
  // uni.navigateTo({ url: `/pages/goods/detail?id=${currentGoods.value.id}` });
};
</script>

<style scoped lang="scss">
// 定义全局变量
$primary-color: #ff0000;
$font-color: #fff;
$spacing: 10rpx;
$border-radius: 10rpx;

.live-page {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 92vh;
  background-color: #000;
  overflow: hidden;

  // 直播状态提示
  .live-status-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36rpx;
    color: $font-color;
    z-index: 10;
  }

  // 顶部区域
  .live-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60rpx;
    padding: 0 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    z-index: 10;

    .live-top-left {
      display: flex;
      align-items: center;

      .host-avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: $spacing;
      }

      .host-name {
        font-size: 28rpx;
        color: $font-color;
      }
    }

    .live-top-right {
      display: flex;
      align-items: center;

      .viewer-count {
        font-size: 28rpx;
        color: $font-color;
        margin-right: 30rpx;
      }

      .shop-btn {
        padding: 8rpx 16rpx;
        background-color: $primary-color;
        color: $font-color;
        border: none;
        border-radius: $border-radius;
        font-size: 24rpx;
      }
    }
  }

  // 视频区域
  .live-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  // 弹幕区域
  .danmu-area {
    position: absolute;
    bottom: 60rpx;
    left: 0;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    max-height: 200rpx; // 限制弹幕区域高度
    overflow-y: auto; // 实现滚动效果

    .danmu-item {
      color: $font-color;
      margin-bottom: 15rpx;
      font-size: 24rpx;
      opacity: 0.9;
    }

    .danmu-input {
      width: 100%;
      padding: 12rpx;
      border-radius: $border-radius;
      font-size: 24rpx;
      background-color: rgba(255, 255, 255, 0.8);
    }
  }

  // 商品卡片
  .goods-min-card {
    position: absolute;
    right: 20rpx;
    bottom: 20%;
    width: 200rpx;
    height: 230rpx;
    background-color: #fff;
    border-radius: $border-radius;
    padding: 10rpx;
    box-sizing: border-box;
    z-index: 10;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);

    .goods-image {
      width: 100%;
      height: 120rpx;
      border-radius: $border-radius;
      margin-bottom: 10rpx;
    }

    .goods-title {
      font-size: 24rpx;
      text-align: center;
      margin-bottom: 10rpx;
      color: #333;
    }

    .buy-btn {
      width: 100%;
      height: 50rpx;
      background-color: $primary-color;
      color: $font-color;
      border: none;
      border-radius: $border-radius;
      font-size: 24rpx;
    }
  }
}
</style>